<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color: red;
        }

        .blue {
            color: blue;
        }
    </style>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="../react@17.js"></script>
<script src="../react-dom@17.js"></script>
<script src="../babel.js"></script>
<script type="text/babel">
    let userList = ["张三", "王五", "李四", "赵六"];
    let styleObj = {
        fontSize: "20px",
        background: "black"
    };
    let imgurl = 'https://api.java.crmeb.net/crmebimage/public/content/2022/08/04/0f78716213f64bfa83f191d51a832cbf73f6axavoy.jpg'
    let ol = (
        <ol>
            {
                userList.map((item, index) => {
                    /* 
                     绑定style {{属性名属性值}}
                    */
                    return <li key={index} className={index % 2 === 0 ? 'red' : 'blue'} style={styleObj}>{item}</li>
                })
            }
            {
                /* 在jsx中标签必须要有结束标签 */
            }
            <img src={imgurl} alt="" />
        </ol>
    )
    ReactDOM.render(ol, document.getElementById("root"))
</script>

</html>